<template>
<div class="bottom-nav">
    <router-link to="/Index/Home" replace class="nav-item" :class="{active: $route.path === '/Index/Home'}">
        <div class="nav-item-icon">🏠</div>
        <div>首页</div>
    </router-link>
    <router-link to="/Index/Discover" replace class="nav-item" :class="{active: $route.path === '/Index/Discover'}">
        <div class="nav-item-icon">🔍</div>
        <div>发现</div>
    </router-link>
    <div @click="handelPublishClick()" class="nav-item" :class="{active: $route.path === '/Publish'}" style="cursor: pointer;">
        <div class="nav-item-icon">➕</div>
        <div>发布</div>
    </div>
    <div @click="handelMessageClick()" replace class="nav-item" :class="{active: $route.path === '/Index/Message'}" style="cursor: pointer;">
        <div class="nav-item-icon">💬</div>
        <div>消息</div>
    </div>
    <router-link to="/Index/Profile" replace class="nav-item" :class="{active: $route.path === '/Index/Profile'}">
        <div class="nav-item-icon">👤</div>
        <div>我的</div>
    </router-link>
</div> 
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { UserInfoStore } from '@/stores/userInfoStore'
import { TipStore } from '@/stores/tipStore'

const router = useRouter()
const user_Store = UserInfoStore()
const tip_Store = TipStore()

const handelPublishClick = ()=>{
    if(!user_Store.userInfo.id){
        tip_Store.warningTip('请先登录')
    }else{
        router.push('/Publish')
    }
}

const handelMessageClick = ()=>{
    if(!user_Store.userInfo.id){
        tip_Store.warningTip('请先登录')
    }else{
        router.push('/Index/Message')
    }
}

</script>

<style lang="scss" scoped>
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
}
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #666;
    font-size: 12px;
}
.nav-item.active {
    color: #ff6b6b;
}
.nav-item-icon {
    font-size: 20px;
    margin-bottom: 4px;
}
</style>